<template>
	<view>
		<NavBar title="疗程服务"></NavBar>
		
		<view class="searchWrap">
		    <img src="/static/list/search.png" class="img"/>
		    <input type="text" placeholder="请输入想要了解的疗程" class="input" placeholder-class="placeholder" @input="handleSearchInput"/>
		</view>
		
		<view class="treatment_categories_wrap">
			<view class="treatment_category" v-for="(category,index) in categoryList" :key="index" :style="[category.style]" @click="handleTreatmentCategoryBtn(category.name)">
				{{category.name}}
			</view>
		</view>
		
		<view class="treatmentList_wrap">
			
			<Goods v-for="(treatment,index) in treatmentList" :key="index" :name="treatment.name" :mins="treatment.mmins" :image="treatment.thumb_url" :price="treatment.new_price"/>
			
		</view>
		
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue';
	import Goods from '@/components/Goods.vue';
	import {Request,getGlobalData} from '@/util.js';
	const domain = getGlobalData('domain');
	const navBarHeight = uni.getStorageSync('navBarHeight');
	const openid = uni.getStorageSync('openid');
	export default {
		components:{
			NavBar,
			Goods
		},
		data() {
			return {
				categoryList:[],
				treatmentList:[]
			};
		},
		onShow(){
			this.commitTabBarID(3);
			this.getCategoryList();
			this.getTreatmentList();
		},
		methods:{
			getTreatmentList(){
				let categoryName = uni.getStorageSync("selectedCategory") == "" ? "所有疗程" : uni.getStorageSync("selectedCategory");
				Request(domain+"/client/treatment/treatmentListByCategoryName",{categoryName:categoryName}).then((res)=>{
				    this.treatmentList = res.data.data;
				}); 
			},
			handleTreatmentCategoryBtn(categoryName){
				uni.setStorageSync("selectedCategory",categoryName);
				var newTreatmentCategoryList = [];
				for( let i in this.categoryList){
				    if(this.categoryList[i].name === categoryName){
				        this.categoryList[i].style = {backgroundColor:'#E6c7c7'};
				    }else{
				        this.categoryList[i].style = {};
				    }
		            newTreatmentCategoryList[i] = this.categoryList[i]
				}
				this.categoryList =  newTreatmentCategoryList;
				//重新获取疗程列表
				this.getTreatmentList();
			},
			handleSearchInput(res){
				Request(domain+"/client/treatment/treatmentListBySearchVal",{searchVal:res.detail.value}).then((res)=>{
					this.treatmentList = res.data.data;
				});
			},
			getCategoryList(){
				Request(domain+"/client/treatmentCategory/treatmentCategoryForListPage").then((res)=>{
					let data = res.data.data;
					//判断所选的疗程分类是否为空
					let selectedCategory = uni.getStorageSync("selectedCategory");
					if(selectedCategory){
					    for(let i in data){
			                if(data[i].name === selectedCategory){
				                data[i].style = {backgroundColor:'#E6c7c7'}
					        }else{
				                data[i].style = {}
		                    }
					    }
					}else{
					    for(let i in data ){
					        if(i==0){
					            data[i].style = {backgroundColor:'#E6c7c7'}
					        }else{
				                data[i].style = {}
		                    }
				        }
					}
					this.categoryList = data;
				})
			}
		}
	}
</script>

<style lang="less">
	@import "../../uni.less";
	page{
	    background-color: @background_color;
	    padding-bottom: 100px;
	}
</style>

<style scoped lang="less">
	.searchWrap{
	    width: 90%;
	    height: 70rpx;
	    background-color:#fff;
	    border-radius: 20rpx;
	    margin:0 auto;
	    margin-top:200rpx;
	    display: flex;
	    align-items: center;
	
	    .img{
	        width:40rpx;
	        height:40rpx;
	        margin-left: 20rpx;
	    }
	
	    .input{
	        width:85%;
	        height: 100%;
	        margin-left: 20rpx;
	    }
	
	    /deep/ .placeholder{
	        color: #DEDEDE;
	        font-size:27rpx;
	    }
	    
	}
	
	.treatment_categories_wrap{
	    width:91%;
	    height: 48rpx;
	    // border:1rpx solid #000;
	    margin: 0 auto;
	    margin-top: 30rpx;
	    display: flex;
	
	    .treatment_category{
	        width: 120rpx;
	        height: 48rpx;
	        border-radius: 15rpx;
	        border:1rpx solid #63403F;
	        background-color: #fff;
	        font-size: 24rpx;
	        line-height: 48rpx;
	        text-align: center;
	        margin-right: 13rpx;
	        color:#63403F;
	    }
	}
	
	.treatmentList_wrap{
	    // border: 1rpx solid #000;
	    width: 94%;
	    margin:0 auto;
	    display: flex;
	    flex-wrap: wrap;
	    margin-top: 30rpx;
	    justify-content: space-between;
	}
</style>
